<template>
  <div class="container">
    <div class="head">
      <el-button @click="itemlist(0)">未支付列表</el-button>
      <el-button @click="itemlist(1)">待发货列表</el-button>
      <el-button @click="itemlist(2)">待收货列表</el-button>
      <el-button @click="itemlist(3)">待评论列表</el-button>
      <el-button @click="itemlist(4)">已完成列表</el-button>
    </div>
    <el-table :data="rorderlist" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="name" label="用户" />
      <el-table-column prop="proname" label="商品名称" />
      <el-table-column label="图片">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :scr="scope.row.img1" />
        </template>
      </el-table-column>
      <el-table-column prop="originprice" label="价格" sortable />
      <el-table-column prop="num" label="数量" sortable />
      <el-table-column prop="addressDetail" label="收货地址" />
      <el-table-column prop="tel" label="联系方式" />
      <el-table-column label="订单状态">
        <template #default="{ row }">
          {{ ddstatus[row.status] }}
        </template>
      </el-table-column>
      <el-table-column label="购买时间" sortable prop="time">
        <template #default="{ row }">
          <!-- {{ dayjs(row.time).format("MM月DD日") }} -->
          {{ gettime(row.time * 1) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="handlechange()">编辑</el-button>
          <div class="dialog">
            <el-dialog
              v-model="dialogFormVisible"
              title="请选择订单状态"
              :modal="false"
            >
              <el-radio-group v-model="radio">
                <el-radio :label="0">未支付</el-radio>
                <el-radio :label="1">待发货</el-radio>
                <el-radio :label="2">待收货</el-radio>
                <el-radio :label="3">待评价</el-radio>
                <el-radio :label="4">已完成</el-radio>
              </el-radio-group>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="handlesure(row.orderid)">
                    修改
                  </el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev, pager, next,"
        :total="orderlist.length"
        v-model:current-page="page"
        v-model:page-size="pageSize"
      />
    </div>
  </div>
</template>

<script setup>
import dayjs from "dayjs";
import {
  getorderitemlist,
  getorderlist,
  changeorderstate,
} from "@/api/order.js";
import { onMounted, ref, computed } from "vue";

const orderlist = ref([]);
const page = ref(1);
const pageSize = ref(10);
const ddstatus = ref({
  0: "未支付",
  1: "待发货",
  2: "待收货",
  3: "待评价",
  4: "已完成",
});
const dialogFormVisible = ref(false);
const radio = ref();

const rorderlist = computed(() => {
  return orderlist.value.slice(
    (page.value - 1) * pageSize.value,
    page.value * pageSize.value
  );
});

function gettime(time) {
  return dayjs(time).format("MM月DD日");
}

function handlechange() {
  dialogFormVisible.value = true;
}
function handlesure(id) {
  dialogFormVisible.value = false;
  const obj = {
    orderid: id,
    status: radio.value,
  };
  changeorderstate(obj).then((data) => {
    console.log(data);
  });
  getorderlist().then((data) => {
    console.log(data);
    orderlist.value = data.data;
  });
}
function itemlist(id) {
  getorderitemlist(id).then((data) => {
    orderlist.value = data.data;
  });
}
onMounted(() => {
  //   orderitemlist(0).then((data) => {
  //     console.log(data);
  //   });
  getorderlist().then((data) => {
    console.log(data);
    orderlist.value = data.data;
  });
  const now = dayjs(1666835285071).format("MM月DD日");
  console.log("1666835285071");
  console.log(now);
});
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .pagination,
  .head {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
}
.el-overlay,
.el-overlay-dialog,
.dialog {
  background-color: rgb(210 203 203 / 10%);
  .el-overlay {
    background-color: rgb(210 203 203 / 10%);
  }
}
</style>
